<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/styles.css}"/>
    <style type="text/css">
        div.header{
            width: 100%;
            height:250px;

        }
        div.middle1{
            width:100%;
            height:400px;

        }
        div.footer{
            width: 100%;
            height:100px;
            bottom: 5px;
        }


        #left{
            float:left;
            width: 20%;
            height: 100%;
            style:"DISPLAY: none;"
        }
        #right{
            float:right;
            width: 20%;
            height: 100%;
            style:"DISPLAY: none;"
        }
        #middle{
            height: 100%;
            width :auto;
            float: left;
        }
        button {
            width :120px;
            height :64px;
            font-size: 24px;
        }
    </style>
</head>


<script type="text/javascript"  src="../static/jquery-3.5.1/jquery-3.5.1.js" th:src="@{/jquery-3.5.1/jquery-3.5.1.js}"></script>
<script type="text/javascript" >
    var t1 = "";
    var dat;
    var d;
    function ticketsForm(){
        var  destination= document.getElementById("destination").value;
        var  date= document.getElementById("D").value;
        dat =date;
        console.log(destination);
        console.log(date);
        console.log(dat);
        if(destination=='--目的地--'||date==''){
            alert("请完成全部选择在搜索");
        }else{
            $.ajax({
                url:'/see',
                type:'post',
                sync:true,
                data:{
                    "destination":destination,
                    "date":date
                },
                dataType:'json',
                success:function (res){
                    t1=res;
                    console.log(t1);
                    if (res.length > 0) {
                        console.log("长度大于0");
                        let Ticket = "";
                        let Ticket2 = "";
                        let g =0;
                        for (var i = 0; i < res.length; i++) {
                            if(res[i].classify==0){
                                //console.log(i);
                                g++;
                                Ticket += '第'+g+'种方案:<br><span>车号:' + res[i].car + '&nbsp;</span><span>出发地:' + res[i].departure + '&nbsp;</span><span>目的地:' + res[i].destination + '&nbsp;</span><span>出发时间:' + res[i].Htimea + '&nbsp;</span><span>到达时间:' + res[i].Htimeb + '&nbsp;</span><span>票数:' + res[i].poll + '&nbsp;</span><span>金额:' + res[i].money + '</span>' +'<input type=\"radio\" name=\"car\" id=\"car\" value=\"'+i+'\" />'+'<br>';
                            }else if(res[i].classify>0){
                                if(res[i].classify==1){
                                    g++;
                                    Ticket2 += '第'+g+'种方案:<br><span>车号:' + res[i].car + '&nbsp;</span><span>出发地:' + res[i].departure + '&nbsp;</span><span>目的地:' + res[i].destination + '&nbsp;</span><span>出发时间:' + res[i].Htimea + '&nbsp;</span><span>到达时间:' + res[i].Htimeb + '&nbsp;</span><span>票数:' + res[i].poll + '&nbsp;</span><span>金额:' + res[i].money + '</span><br>';
                                }else{
                                    Ticket2 += '<span>车号:' + res[i].car + '&nbsp;</span><span>出发地:' + res[i].departure + '"&nbsp;</span><span>目的地:' + res[i].destination + '"&nbsp;</span><span>出发时间:' + res[i].Htimea + '"&nbsp;</span><span>到达时间:' + res[i].Htimeb + '"&nbsp;</span><span>票数:' + res[i].poll + '"&nbsp;</span><span>金额:' + res[i].money + '"&nbsp;</span><span>总金额:'+(res[i].money+res[i-1].money)+'"</span>'+'<input type=\"radio\" name=\"car\" id=\"car\" value=\"'+i+'\" />'+'<br>';
                                }
                            }
                        }
                        console.log(Ticket);
                        $('#main').html(Ticket);
                        $('#main2').html(Ticket2);
                    }
                }
            });
        }

    }
    function establish(n) {
        d='';
        $.each($('input:radio'),function(){
            if(this.checked){
                d =$(this).val();
                console.log(d);
            }
        });
        if(d==''){
            alert("没有选择方案就提交");
        }else{
            var d1 = t1[d];
            var Tick="";
            if(d1.classify==0){
                //console.log(i);
                console.log("d1.car="+d1.car);

                $('#car1').val(d1.car);
                // $('#car1').text(d1.car);
                $('#car2').val(d1.car);
                $('#departure1').val(d1.departure);
                $('#departure2').val(d1.departure);
                $('#destination1').val(d1.destination);
                $('#destination2').val(d1.destination);
                $('#Date').val(dat);
                $('#Htimea1').val(d1.Htimea);
                $('#Htimea2').val(d1.Htimea);
                $('#Htimeb1').val(d1.Htimeb);
                $('#Htimeb2').val(d1.Htimeb);
                $('#polla').val(d1.poll);
                $('#pollb').val(d1.poll);
                $('#mon').val(d1.money);
                console.log("这类型是"+d1.classify);
                $('#classify').val(d1.classify);
                Tick += '<span>车号:' + d1.car + '&nbsp;</span><br><span>出发地:' + d1.departure + '&nbsp;</span><span>目的地:' + d1.destination + '&nbsp;</span><br><span>出发时间:' + d1.Htimea + '&nbsp;</span><span>到达时间:' + d1.Htimeb + '&nbsp;</span><br><span>票数:' + d1.poll + '&nbsp;</span><br><span>金额:' + d1.money + '</span><br>';
            }else if(d1.classify>0){
                var d2 = t1[d-1];
                if(d1.classify==2){
                    $('#car1').val(d2.car);
                    $('#car2').val(d1.car);
                    $('#departure1').val(d2.departure);
                    $('#departure2').val(d1.departure);
                    $('#destination1').val(d2.destination);
                    $('#destination2').val(d1.destination);
                    $('#Date').val(dat);
                    $('#Htimea1').val(d2.Htimea);
                    $('#Htimea2').val(d1.Htimea);
                    $('#Htimeb1').val(d2.Htimeb);
                    $('#Htimeb2').val(d1.Htimeb);
                    $('#polla').val(d2.poll);
                    $('#pollb').val(d1.poll);
                    $('#mon').val((d1.money+d2.money));
                    $('#classify').val(d1.classify);
                    Tick += '<span>第一趟车<br>车号:' + d2.car + '&nbsp;</span><span>出发地:' + d2.departure + '&nbsp;</span><span>目的地:' + d2.destination + '&nbsp;</span><br><span>出发时间:' + d2.Htimea + '&nbsp;</span><span>到达时间:' + d2.Htimeb + '&nbsp;</span><br><span>票数:' + d2.poll + '&nbsp;</span><span>金额:' + d2.money + '</span><br>';
                    Tick += '<span>第二趟车<br>车号:' + d1.car + '&nbsp;</span><span>出发地:' + d1.departure + '&nbsp;</span><span>目的地:' + d1.destination + '&nbsp;</span><br><span>出发时间:' + d1.Htimea + '&nbsp;</span><span>到达时间:' + d1.Htimeb + '&nbsp;</span><br><span>票数:' + d1.poll + '&nbsp;</span><span>金额:' + d1.money + '&nbsp;</span><span>总金额:'+(d1.money+d2.money)+'</span><br>';
                }
            }
            $('#tic').html(Tick);
            var a;
            var div= document.getElementById('inputbox');
            div.style.display = n ? 'block' : 'none';     /* 点击按钮打开/关闭 对话框 */
            if (n) {
                a = n.parentNode.getElementsByTagName('a')[0];
                ipt = div.getElementsByTagName('input');
                //ipt[0].value = null;
            }
        }

    }

</script>
<body>
<div class="header">
    <img th:src="@{/0.jpeg}" width="100%" height="100px"/><br>
    <h1 >
        <div align="right"><span class="clock">60</span>秒</div>
        <div align="center" style="font-size: 48px">购票界面</div>
    </h1>
</div>

<div class="middle1">
    <div id="left" ></div>
    <div id="middle">
        <form method="post" id="ticketForm" name="ticketForm">
            <tr>
                <select id="destination" name="destination">
                    <option>--目的地--</option>
                    <label th:each="ticket:${tickets1}" class="check-box">
                        <option><span th:text="${ticket}">INGREDIENT</span></option>
                    </label>
                </select>
            </tr>
            <tr>
                <input  type="date" name="date"  id="D">
            </tr>
            <tr>
                <td>
                    <input  type="button" value="查询" onclick="ticketsForm()"/>

                </td>
            </tr>
            <script>
                var t = 60;
                var time = document.getElementsByClassName("clock")[0];

                function fun() {
                    t--;
                    time.innerHTML = t;
                    if(t <= 0) {
                        // clearInterval(inter);
                        // alert("aaa");
                        //document.location.href("www.baidu.com");
                        // window.location.href("www.baidu.com");
                        javaScript:history.go(-1);
                    }
                }
                var inter = setInterval("fun()", 1000);
            </script>
        </form>
        <div>
            <tr>
                <input type="button" value="返回" onclick="window.location.href='/'">
            </tr>
        </div>
        <form method="post" id="ticket" name="ticket">
            <tr>
                <td>直达</td>
            </tr>
            <tr>
                <div class="list-item" id="main"></div>
            </tr>
            <tr>
                <td>转乘</td>
            </tr>
            <tr>
                <div id="main2"></div>
            </tr>
            <tr>
                <input  type="button" value="提交" id="forms" onclick="establish(this)"/>
            </tr>
        </form>
        <div id='inputbox' class="box">
            <a class='x' href=''  onclick="establish(); return false;">关闭</a>
            <form method="post" th:action="@{/bars}">
                <table align="center">
                    <tr>
                        <input type="hidden" id="car1" name="car1">
                        <input type="hidden" id="car2" name="car2">
                        <input type="hidden" id="departure1" name="departure1">
                        <input type="hidden" id="departure2" name="departure2">
                        <input type="hidden" id="destination1" name="destination1">
                        <input type="hidden" id="destination2" name="destination2">
                        <input type="hidden" id="Date" name="Date">
                        <input type="hidden" id="Htimea1" name="Htimea1">
                        <input type="hidden" id="Htimea2" name="Htimea2">
                        <input type="hidden" id="Htimeb1" name="Htimeb1">
                        <input type="hidden" id="Htimeb2" name="Htimeb2">
                        <input type="hidden" id="polla" name="polla">
                        <input type="hidden" id="pollb" name="pollb">
                        <input type="hidden" id="classify" name="classify">
                        <input type="hidden" id="mon" name="mon">
                    </tr>
                    <tr>
                        <div id="tic" align="center"></div>
                    </tr>
                    <tr>
                        <td id="t" align="right">电话:</td>
                        <td><input type="text" id="phone" name="phone"/></td>
                    </tr>
                    <tr>
                        <td id="t2" align="right">金额:</td>
                        <td><input type="text" id="Money" name="Money"/></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center" height="40"><input type="submit"  value="确认" /></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div id="right"></div>
</div>
<div class="footer">
    <img th:src="@{/1.png}" width="100%" height="100px"/><br>
</div>
</body>
</html>